import { useAccess, Access } from '@umijs/max';
import { PageContainer } from '@ant-design/pro-components';
import { Table, Button, Space, Tag, message } from 'antd';
import { useState } from 'react';
import { history } from '@umijs/max';
import { useDispatch } from 'umi';
import { FormattedMessage, useIntl } from 'umi';

import useData from '@/utils/vatio';

const mockProducts = [
  {
    id: '1',
    name: '商品1',
    price: 99.99,
    stock: 100,
    status: 'active',
  },
  {
    id: '2',
    name: '商品2',
    price: 199.99,
    stock: 50,
    status: 'active',
  },
  {
    id: '3',
    name: '商品3',
    price: 299.99,
    stock: 0,
    status: 'inactive',
  },
];

const ProductList: React.FC = () => {

   // 获取国际化
    const intl = useIntl();
   const msg = intl.formatMessage({
    id: 'welcome',
  });

  // 全局共享数据获取
  console.log(useData().userInfo, 'sssss');
  const [products, setProducts] = useState(mockProducts);
  const access = useAccess();

  // 查看商品详情
  const handleViewDetail = (id: string) => {
    history.push(`/products/detail/${id}`);
  };

  // 下架商品
  const handleDeactivate = (id: string) => {
    setProducts(
      products.map((product) =>
        product.id === id ? { ...product, status: 'inactive' } : product,
      ),
    );
    message.success('商品已下架');
  };

  // 上架商品
  const handleActivate = (id: string) => {
    setProducts(
      products.map((product) =>
        product.id === id ? { ...product, status: 'active' } : product,
      ),
    );
    message.success('商品已上架');
  };

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      render: (price: number) => `¥${price.toFixed(2)}`,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      key: 'stock',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '已上架' : '已下架'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record: any) => (
        <Space size="middle">
          <Button type="link" onClick={() => handleViewDetail(record.id)}>
            查看
          </Button>
          <Access accessible={access.isSuperAdmin || access.canAccessProducts}>
            {record.status === 'active' ? (
              <Button type="link" danger onClick={() => handleDeactivate(record.id)}>
                下架
              </Button>
            ) : (
              <Button type="link" onClick={() => handleActivate(record.id)}>
                上架
              </Button>
            )}
          </Access>
        </Space>
      ),
    },
  ];
  
  const dispatch = useDispatch();
   const changeName = () => {
    dispatch({
      type: 'global/updateName',
      payload: 'umi store',
    });
  };

  return (
    <PageContainer header={{ title: '' , breadcrumb: undefined}}>
      <FormattedMessage id="welcome" />

      <Access accessible={access.isSuperAdmin || access.canAccessProducts}>
        <div style={{ marginBottom: 16, display: 'flex',gap:10}}>
          <Button type="primary">新增商品{msg}</Button>
           <Button type='primary' onClick={changeName}>userName</Button>
        </div>
      </Access>
      <Table columns={columns} dataSource={products} rowKey="id" />
    </PageContainer>
  );
};

export default ProductList;